<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第 2 天</title>
    <style>
        #graph-container{
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="graph-container"></div>
</body>

<script src="../js/g6.min.js"></script>
<script>
    // 准备容器
    const container = document.getElementById('graph-container');
    const width = container.scrollWidth;
    const height = container.scrollHeight;

    // 准备数据
    const data = {
        nodes: [
            {
                id: 'Model',
                type: 'model-node',
                x: 100,
                y: 100,
                style: {
                    width: 160,
                    height: 100,
                    fill: '#f1b953',
                    stroke: '#f1b953',
                },
                openIcon: {
                    x: 180,       // 控制图标在横轴上的位置
                    y: 45,       // 控制图标在纵轴上的位置
                    fontSize: 20,
                    style: {
                        fill: '#fc0',
                    },
                },
                hideIcon: {
                    x: 180,       // 控制图标在横轴上的位置
                    y: 45,       // 控制图标在纵轴上的位置
                    fontSize: 20,
                    style: {
                        fill: '#666',
                    },
                },
                labels: [{
                    x: 10,
                    y: 20,
                    label: '标题,最长10个字符~~',
                    labelCfg: {
                        fill: '#666',
                        fontSize: 14,
                        maxlength: 10,
                    },
                }, {
                    x: 10,
                    y: 40,
                    label: '描述,最长12个字符~~~',
                    labelCfg: {
                        fontSize: 12,
                        fill: '#999',
                        maxlength: 12,
                    },
                }],
            }
        ],
    }

    // 注册自定义节点
    G6.registerNode('model-node', {
        drawShape(cfg, group) {
            const { openIcon, hideIcon } = cfg;

            // 添加节点
            const shape = group.addShape('rect', {
                name: 'model-node',
                draggable: true, // 让自定义节点支持拖拽
                attrs: cfg.style,
            });

            const openSwitch = group.addShape('circle', {
                draggable: true,
                attrs: {
                    r: 10,
                    ...openIcon,
                    ...openIcon.style,
                },
                className: 'state-open',
            });

            const hideSwitch = group.addShape('circle', {
                draggable: true,
                attrs: {
                    r: 10,
                    ...hideIcon,
                    ...hideIcon.style,
                },
                className: 'state-hide',
            });

            // 添加多行文本
            for(let i = 0; i < cfg.labels.length; i++) {
                const item = cfg.labels[i];
                const { label, labelCfg: { maxlength }, className } = item;

                let text = maxlength ? label.substr(0, maxlength) : label || '';

                if (label.length > maxlength) {
                    text = `${text}...`;
                }

                group.addShape('text', {
                    attrs: {
                        text,
                        ...item,
                        ...item.labelCfg,
                    }
                });
            }

            this.bindEvent(group, openSwitch);
            this.bindEvent(group, hideSwitch);

            return shape;
        },
        bindEvent(group, btn) {
            btn.on('click', () => {
                const open = group.get('children').find(child => child.cfg.className === 'state-open');
                const close = group.get('children').find(child => child.cfg.className === 'state-hide');

                if(btn.cfg.className === 'state-open') {
                    const item = group.get('item');
                    const model = item.getModel();

                    open.toBack();
                    close.toFront();
                    model.style.height = 100;
                    item.update(model);
                } else if(btn.cfg.className === 'state-hide') {
                    const item = group.get('item');
                    const model = item.getModel();

                    close.toBack();
                    open.toFront();
                    model.style.height = 50;
                    item.update(model);
                }
            });
        },
    }, 'single-node'); // 继承自内置节点

    // 实例化 G6
    const graph = new G6.Graph({
        container: 'graph-container',
        width,
        height,
        // renderer: 'svg',
        fitCenter: true,
    });

    // 传入数据
    graph.data(data);
    // 执行渲染
    graph.render();
    // graph.fitView();

    // 绑定事件:
    // 关闭/展开节点

</script>
</html>
